<template>
    <div id="CarSharingUser">
      <ul id="ul1">
        <li>
          <el-input v-model="userName" placeholder="请输入查询用户"></el-input>
        </li>
        <li>
          <el-button type="primary" @click="queryUserByName">查询</el-button>
        </li>
      </ul>
      <!-- 表格 -->
      <el-table
       :row-style="rowStyle"
        :data="userData"
        border
        style="width: 100%"
        height="500"
      >
        <el-table-column prop="userName" label="被充值用户"></el-table-column>
        <!-- <el-table-column prop="optionUser" label="操作人员"></el-table-column> -->
        <el-table-column prop="amount" label="金币">
          <template slot-scope="scope">
            {{ formattedAmount(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="交易状态"></el-table-column>
        <!-- <el-table-column prop="productId" label="消费项目"></el-table-column> -->
        <el-table-column
          prop="createTime"
          label="充值时间"
          min-width="120"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 2, 3, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        style="margin-top: 30px"
      >
      </el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    name: "CarSharingUser",
    data() {
      return {
        userData: [], // 员工查询数据
        pageSize: 10, // 每页显示的个数
        pageNum: 1, // 起始的页数 表格中当前页面
        total: 0,
        userName:"",
      };
    },
    computed: {
      formattedAmount() {
        return (row) => {
          const amount = parseFloat(row.amount);
          return isNaN(amount) ? "0.00" : amount.toFixed(2);
        };
      },
    },
    mounted() {
      this.queryUserByName();
    },
    methods: {
      rowStyle(row) {
      if (row.row.userFlag == 1) {
        return { "background-color": "rgb(233 233 233)" };
      }
    },
      // 提示信息
    myMessage(type, message) {
      this.$message({
        showClose: true,
        message: message,
        type: type,
      });
    },
      handleSizeChange(val) {
        this.pageSize = val;
        this.queryUserByName();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.queryUserByName();
        console.log(`当前页: ${val}`);
      },
      queryUserByName() {
        // 查询员工信息
        this.$axios
          .get("transactionHistory/getTransactionHistoryByPage",
          {
            params: {
            userName: this.userName,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
            },)
          .then((res) => {
            if (res.status === 200) {
              this.userData = res.data.data.content;
              this.total = res.data.data.totalSize;
            }
          })
          .catch((error) => {
            this.myMessage("error", "错误哦！系统错误，请联系管理员！");
            console.log(error);
          });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  #ul1 {
    height: 40px;
    margin-bottom: 15px;
    list-style: none;
  }
  #ul1 li {
    float: left;
    margin-right: 10px;
  }
  </style>
  